Surface's button family — use inverted for the one primary CTA on a view, pill for secondary actions, ghost for inline "learn more" links.

Get your free audit Start the conversation Organic SEO →

Variants: pill (transparent, fills with --text on hover) · inverted (solid --text fill, inverts to outline on hover — the primary black button) · secondary (6/12 padding, 6px radius, 12px — the only non-pill radius in the button set) · ghost (no border, permanent underline that wipes left-to-right on hover).

Buttons use DM Sans at 16px, not the display face. Ghost links carry a trailing → in site copy.